<template>
    <div class="other-group">
        <div class="other-login-title">
            <div class="line"></div>
            <span class="other-login-text">其他登录方式</span>
            <div class="line"></div>
        </div>
        <div class="other-login">
            <div class="other-login-logo">
                <el-image class="qq" @click="loginWeinxin"
                    :src="require('@/assets/img/account/icon-weixin.png')"></el-image>
                <div class="last" v-if="last === 'weixin'">上次</div>
            </div>
            <div class="other-login-logo">
                <el-image class="weixin" @click="loginQQ" :src="require('@/assets/img/account/icon-qq.png')"></el-image>
                <div class="last" v-if="last === 'qq'">上次</div>
            </div>
        </div>
    </div>
</template>

<script>
import { weixinLogin } from "@/request/api"
export default {
    data() {
        return {
            wxHref: ""
        }
    },
    mounted() {
        weixinLogin().then(res => {
            if (res.data.resultCode === "200") {
                this.wxHref = res.data.data;
            }
        })
    },
    methods: {
        loginWeinxin() {
            window.location.href = this.wxHref
        },
        loginQQ() {
            window.location.href = "https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&client_id=102032409&redirect_uri=http%3A%2F%2Fapi.synbiochallenges.com%2Fapi%2Fqq%2Fcallback&scop=get_user_info&state=0001"
            // localStorage.setItem("last", 'qq');
        }
    },
    computed: {
        last() {
            let show = false;
            let lastShow = localStorage.getItem('last');
            if (lastShow) {
                show = lastShow
            }
            return show
        }
    }
}
</script>


<style lang="less" scoped>
.other-group {
    width: 100%;
}

.other-login {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-top: 0.21rem;

    .el-image {
        width: 1.6rem;
        height: 1.6rem;
        margin: 0 0.265rem;
        position: relative;
    }
}

.line {
    width: 5.87rem;
    height: 0.03rem;
    background: #C5C5CA;
}

.other-login-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .last {
        background: linear-gradient(315deg, #FAFBFF 0%, #FCF8FF 100%);
        border-radius: 0.11rem;
        font-size: 0.32rem;
        font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
        font-weight: normal;
        color: #C5C5CA;
        line-height: 0.48rem;
        padding: 0.1rem 0.19rem;
        margin-top: 0.27rem;
    }
}

.other-login-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .other-login-text {
        height: 0.96rem;
        font-size: 0.59rem;
        font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
        font-weight: normal;
        color: #68656C;
        line-height: 0.96rem;
    }
}
</style>